<template>
  <div class="hello">
    <van-search shape="round" background="#00BDDF" placeholder="请输入你喜欢的明星" show-action>
      <template #action>
        <div @click="skip" v-show="!sa">{{abc}} <span v-show="sa">北京</span></div>
        <!-- <div @click="skip" v-show="sa">北京</div> -->
      </template>
    </van-search>
    <van-swipe class="my-swipe" :autoplay="3000">
      <van-swipe-item v-for="(item,index) in imgs" :key="index">
        <img :src="item" width="100%" height="200px" />
      </van-swipe-item>
    </van-swipe>
    <van-swipe class="my-swipe">
      <van-swipe-item>
        <div>
          <van-grid>
            <van-grid-item
              v-for="(item,index) in list"
              :key="index"
              :icon="item.img"
              :text="item.title"
            />
          </van-grid>
        </div>
      </van-swipe-item>
      <van-swipe-item>
        <div>
          <van-grid>
            <van-grid-item
              v-for="(item,index) in list1"
              :key="index"
              :icon="item.img"
              :text="item.title"
            />
          </van-grid>
        </div>
      </van-swipe-item>
    </van-swipe>
    <p class="re">热销推荐</p>
    <div v-for="(item,index) in data" :key="index">
      <div class="details">
        <div class="left">
          <img :src="item.imgurl" height="100px" width="80%" />
        </div>
        <div class="right">
          <p>{{item.name}}</p>
          <p style="color:gray;font-size:0.25rem">{{item.work}}</p>
          <br />
          <span class="xq" @click="det">{{item.detail}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgs: [
        "./static/img/jie.jpg",
        "./static/img/jie.jpg",
        "./static/img/jie.jpg",
      ],
      list: [],
      list1: [],
      data: [],
      cs: [],
      // title:''
      abc: "",
      sa: true,
    };
  },
  // prop:{
  //     item:String
  // },

  created() {
    if(this.$route.query.name==undefined){
      console.log(111)
      this.$route.query.name="北京"
    }
    //  this.a= this.$route.query.item
    console.log(this.$route.query.name);
    this.cs.push(this.title);
    // console.log(this.cs);
    this.$axios.get("./static/api/list.json").then((res) => {
      // console.log(res.data);
      this.list = res.data;
    });
    this.$axios.get("./static/api/list1.json").then((res) => {
      // console.log(res.data);
      this.list1 = res.data;
    });
    this.$axios.get("./static/api/data.json").then((res) => {
      // console.log(res.data);
      this.data = res.data;
    });
  },
  methods: {
    skip() {
      this.$router.push({
        path: "/City",
      });
    },
    det(){
      this.$router.push({
        path:'/details'
      })
    }
  },
  activated() {
    this.abc = this.$route.query.name;
    if (this.abc == "") {
      this.sa = true;
    } else {
      this.sa = false;
    }
  },
};
</script>

 <style lang="stylus" scoped >
 .details {
   font-size: 0.3rem;
 }

 .details img {
   padding: 5px;
 }

 .re {
   font-size: 0.25rem;
   height: 30px;
   line-height: 30px;
   background: #eee;
   padding-left: 15px;
 }

 .left {
   float: left;
   width: 30%;
   height: 100px;
 }

 .right {
   float: left;
   width: 70%;
   height: 100px;
   padding-top: 10px;
 }

 .right p {
   padding-top: 10px;
 }

 .xq {
   padding: 3px 6px 3px 6px;
   background-color: orange;
   color: white;
   line-height: 100%;
 }
</style>
